import React from 'react';
import {Radio} from 'antd';
const RadioGroup = Radio.Group;
import {WeaSearchGroup, WeaFormItem, WeaBrowser} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EType from './base/EType';
import ETitle from './base/ETitle';
import EShowNum from './base/EShowNum';
import ELinkMode from './base/ELinkMode';
import EShowHeader from './base/EShowHeader';
//import EField from './base/EField';
import EField_New from './base/EField_New'

// 未读文档
export default class Content_6 extends React.Component {
    state = {
        docSourceType: this.props.eDocSourceType.selected,
        docCatalogs: this.props.docCatalogs,
        virtualCatalogs: this.props.virtualCatalogs,
        docCatalogsNames: this.props.docCatalogsNames,
        virtualCatalogsNames: this.props.virtualCatalogsNames,
        eFieldNewDataSource: this.props.eFieldNewDataSource,
        eFieldNewUsedKeys: this.props.eFieldNewUsedKeys,
        eFieldNewVisible: false,
    };

    render() {
        const { docSourceType, docCatalogs, docCatalogsNames, virtualCatalogsNames,  eFieldNewDataSource, eFieldNewUsedKeys, eFieldNewVisible } = this.state;

        let EDocFrom = <div></div>;
        if (this.props.eShareLevel == '2') {
            const type = {docCatalogs: 'doccategory', virtualCatalogs: 'docdummy'};
            const isMultCheckbox = {docCatalogs: true, virtualCatalogs: true};
            const replaceDatas = {docCatalogs: docCatalogsNames, virtualCatalogs: virtualCatalogsNames};

            EDocFrom = (
                <div className="portal_unreadDoc_dataSources"><WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@40nwm5`} label={getLabel(20532, '文档来源')} labelCol={{span: 6}} wrapperCol={{span: 16}} className="portal_unreadDoc_dataSources">
                    <RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@24ltle`} value={docSourceType} onChange={e => this.setState({docSourceType: e.target.value})}>
                        {
                            this.props.eDocSourceType.options.map((item, index) => {
                                const __type = item.type;
                                const __typeNames = item.type + 'Names';
                                let dataParams = {};
                                if('docCatalogs' == __type) dataParams = {filtercategoryid:docCatalogs, filtertype:3,noAllDirName:'1'};
                                else dataParams ={};
                                let style = item.type != 'allDocs' ? {display: 'inline-block', width: '25%', textOverflow: 'ellipsis', overflow: 'hidden'}:{display: 'inline-block', width: '74px', textOverflow: 'ellipsis', overflow: 'hidden', paddingBottom: '6px'};
                                return (
                                    <Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@uuhuv0@${item.type}`} key={index} value={item.value} style={{display: 'block'}}>
                                        <div style={{paddingTop: '11px'}}>
                                            <div title={item.label} style={style}>{item.label}</div>
                                            {
                                                item.type != 'allDocs' ?
                                                    <div style={{display: 'inline-block', width: '75%', margin: '5px 10px', verticalAlign: 'middle'}}>
                                                        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@ij0eoz@${item.type}`}
                                                            type={type[__type]}
                                                            dataParams={dataParams}
                                                            isSingle={false}
                                                            replaceDatas={replaceDatas[__type]}
                                                            onChange={(ids, names, datas) => {
                                                                this.setState({[__type]: ids, [__typeNames]: datas});
                                                                if(ids != ''){
                                                                    this.setState({docSourceType: item.value});
                                                                }
                                                            }}
                                                        />
                                                    </div> : ''
                                            }
                                        </div>
                                    </Radio>
                                );
                            })
                        }
                    </RadioGroup>
                </WeaFormItem></div>
            );
        }

        let EFieldNewshow = <div></div>;
        let EFieldNew = <div></div>;
        if (eFieldNewVisible) {
            const eFieldNewProps = {
                eFieldNewDataSource: _.cloneDeep(eFieldNewDataSource),
                eFieldNewUsedKeys: _.cloneDeep(eFieldNewUsedKeys),
                onOk: (data) => {
                    this.setState({
                        eFieldNewDataSource: _.cloneDeep(data.eFieldNewDataSource),
                        eFieldNewUsedKeys: _.cloneDeep(data.eFieldNewUsedKeys),
                        eFieldNewVisible: false
                    });
                },
                onCancel: () => {
                    this.setState({
                        eFieldNewVisible: false
                    });
                }
            };
            EFieldNewshow = (
                <EField_New ecId={`${this && this.props && this.props.ecId || ''}_EField_New@li94cx`} {...eFieldNewProps}/>
            );
        }
        const eFieldNewUsedNames = [];
        for (let i = 0; i < eFieldNewUsedKeys.length; i++) {
            for (let j = 0 ; j < eFieldNewDataSource.length; j++) {
                if (eFieldNewUsedKeys[i] == eFieldNewDataSource[j].key) {
                    eFieldNewUsedNames.push(eFieldNewDataSource[j].name);
                }
            }
        }
        
        EFieldNew = this.props.eShareLevel == '2' ? (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@bumxdg`} label={getLabel(19495, '显示字段')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                {EFieldNewshow}
                <div style={{height: '30px', lineHeight: '23px'}}>
                    <i className="icon-coms-Flow-setting portal-esetting-btn" onClick={() => this.setState({eFieldNewVisible: true})}/>
                    <span>{eFieldNewUsedNames.join('，')}</span>
                </div>
            </WeaFormItem>
        ) : '';

        return (
            <div>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@lioqt4`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true}>
                    <EType ecId={`${this && this.props && this.props.ecId || ''}_EType@go61w6`} ref="eType" value={this.props.eBaseName}/>
                    {this.props.eShareLevel == '2' ? <ETitle ecId={`${this && this.props && this.props.ecId || ''}_ETitle@wxfo5w`} ref="eTitle" eid={this.props.eid} value={this.props.eTitle}  {...this.props}/> : ''}
                    <EShowNum ecId={`${this && this.props && this.props.ecId || ''}_EShowNum@94lkvu`} ref="eShowNum" value={this.props.eShowNum}/>
                    <ELinkMode ecId={`${this && this.props && this.props.ecId || ''}_ELinkMode@l1auey`} ref="eLinkMode" options={this.props.eLinkMode.options} value={this.props.eLinkMode.selected}/>
                    {/*<EField ref="eField" value={this.props.eField}/>*/}
                    <EShowHeader ecId={`${this && this.props && this.props.ecId || ''}_EShowHeader@uw5zzq`} ref="eShowHeader" value={this.props.showHeader}/>
                    {EFieldNew}
                    {EDocFrom}
                </WeaSearchGroup>
            </div>
        );
    }

    getSaveValues() {
        return {
            eContentTitle: this.refs['eTitle'] ? this.refs['eTitle'].getSaveValues() : this.props.eTitle,
            eContentShowNum: this.refs['eShowNum'].getSaveValues(),
            eContentLinkMode: this.refs['eLinkMode'].getSaveValues(),
            eContentShowHeader: this.refs['eShowHeader'].getSaveValues(),
            eContentFieldNewUsedKeys: this.state.eFieldNewUsedKeys,
            eContentDocSourceType: this.state.docSourceType,
            eContentDocCatalogs: this.state.docCatalogs,
            eContentVirtualCatalogs: this.state.virtualCatalogs
        };
    }
}